
<template>
    <div class="graph-selector">

      <div  :key="-1"
          class="graph-item"
          :class="{ selected: iSelectShapeIndex == -1 }"
          @click="clearSelection( )"
          :data-index="-1"
          >
            <span class="iconfont icon-xuanzegongju "></span>
            选择
        </div>

        <div 
          v-for="(item, index) in componentList"
          :key="index"
          class="graph-item"
          :class="{ selected: iSelectShapeIndex == index }"
          @click="toggleSelection(item, index )"
          :data-index="index"
          >

          <span v-if="item.icon.substr(0,2) === 'el'" :class="item.icon"></span>
            <span v-else class="iconfont" :class="'icon-' + item.icon" :data-index="index"  ></span>
            {{ item.label }}
        </div>
        <!-- <div>{{ iSelectShapeIndex }}</div> -->

    </div>
    

      
</template>

<script>

import { mapState } from 'vuex'
import componentList from '@/custom-component/component-list'

export default {
  name: "SelectGraphic",
  props:{  },
  components:{  },
  emits:[ "res" ],

  mounted() {

  },
  computed:{
    ...mapState([ 'iSelectShapeIndex',  ]),
  },
  data(){
    return{
      componentList,
    }
  },
  watch: {

  },
  methods:{
    //先把所有的item置为否，然后再置指定的为true
    toggleSelection(item, index ) {
      // this.componentList.forEach(i => (i.isSelected = false));
      // item.isSelected = true;
      this.$store.commit( "setSelectShapeIndex", index )
    },
    clearSelection(  ){
      // this.componentList.forEach(i => (i.isSelected = false));
      this.$store.commit( "setSelectShapeIndex", -1 )
    },

  },  // end of methods

}

</script>

<style  lang="less" scoped >
.graph-selector {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height:700px ;
}

.graph-item {
  width: 150px;
  height: 50px;
  margin-bottom: 10px;
  text-align: center;
  line-height: 50px; /* 文本垂直居中 */
  background-color: #f8f9fa; /* 背景色 */
  cursor: pointer; /* 鼠标悬停时显示手形 */
}

.selected {
  border: 2px solid #007bff; /* 边框颜色 */
}
</style>